<template>
  <div id="globalHeader">
    <a-menu
      mode="horizontal"
      :default-selected-keys="['1']"
      @menu-item-click="onMenuClick"
    >
      <a-menu-item
        key="0"
        :style="{ padding: 0, marginRight: '38px' }"
        disabled
      >
        <div class="logo">
          <img class="logo-img" src="../assets/logo.png" />
          <div class="title">wuguioj</div>
        </div>
      </a-menu-item>

      <a-menu-item v-for="item in routes" :key="item.path">
        {{ item.name }}
      </a-menu-item>
    </a-menu>
  </div>
</template>

<script setup lang="ts">
import { routes } from "@/router/routes";
import { useRouter } from "vue-router";

const router = useRouter();

const onMenuClick = (key: string) => {
  router.push({ path: key });
};
</script>

<style scoped>
.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 50px;
}

.title {
  font-size: 16px;
}
</style>
